<template>
	<view :style="{'padding-top':statusBarHeight + 'px'}">
		<view class="wrap">
			<view class="wrap-title">查询须知</view>
			<view class="navigate-item" v-for="(item, index) in list" :key="index">
				<text class="navigate-text">{{item.info}}</text>
			</view>
			<view class="agreeList">
				<checkbox-group @change="chanage">
					<label class="checkbox" style="color: #E41010;">
						<checkbox value="cb" color="#05C160" style="transform:scale(0.7)" />本人已仔细阅读和同意以上条款，并承诺所填信息均属实
					</label>
				</checkbox-group>
			</view>
			<view class="page-bottom">
				<button type="default" class="page-button" @click="goBack()">上一步</button>
				<button type="default" :class="['page-button', 'agree']" :disabled="isDisabled"
					@click="goTo()">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				// 顶部安全距离
				statusBarHeight: 0,
				// 底部安全距离
				safeAreaInsets: 0,
				isDisabled: true,
				list: [{
						info: '1、为保证信息安全和权利人的合法权益，网上房产信息查询系统会对用户进行身份验证，未经允许擅自使用他人身份证信息进行网上查询导致的一切后果和责任，由查询人自行承担。'
					},
					{
						info: '2、本网上查询结果为截止查询当日在武汉市房产档案系统及合同备案系统中实际记载的房产信息，查询范围仅限于在武汉市房管部门已办理房屋登记、交易和合同备案的房产信息，如需核实不动产登记信息请到房屋所在区属的不动产登记机构申请查询。'
					},
					{
						info: '3、查询申请人应仔细核对填写的身份信息和查询结果信息，如有疑问请提交疑问咨询，收到疑问处理结果短信回复后请重新查询结果信息。'
					},
					{
						info: '4、查询申请人应对查询结果自行承担风险，妥善保管并合法使用。本单位不承担因查询申请人的查询行为，所产生的任何直接、间接、附带或衍生的损失和责任。若查询申请人将查询所得信息用于不正当的用途，由此导致的一切法律后果由查询申请人自行承范。'
					},
					{
						info: '5、自2020年5月13日起，申请人查询房产信息无需申报查询用途。'
					}
				]
			};
		},
		methods: {
			...mapGetters(['getstatusBarHeight', 'getSaInsetBottom']),
			goTo() {
				uni.navigateTo({
					url: '/pages/getVerifiCode/index'
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			chanage(e) {
				let data = e.detail.value
				if (data && data.length > 0) {
					this.isDisabled = false
				} else {
					this.isDisabled = true
				}
			}
		},

		mounted() {
			this.statusBarHeight = this.getstatusBarHeight();
			this.safeAreaInsets = this.getSaInsetBottom();
		}
	};
</script>

<style>
	.wrap {
		padding: 0;
	}

	.wrap-title {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		background: #F0F0F0;
		color: #1A1A1A;
		font-size: 32rpx;
		padding-left: 24rpx;
	}

	.navigate-item {
		/* #ifdef H5 */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		border-top-style: solid;
		border-top-color: #f0f0f0;
		border-top-width: 1px;
		padding: 12px;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.navigate-text {
		flex: 1;
		color: #1E1E1E;
		font-size: 30rpx;
		font-weight: normal;
		line-height: 45rpx;
	}

	.page-bottom {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;

	}

	.page-button {
		width: 320rpx;
		background: #fff;
		color: #596B93;
		font-weight: 600;
	}

	.agree {
		background: #05C160;
		color: #fff;
	}

	.agreeList {
		margin-top: 30rpx;
		padding: 0 24rpx;
	}
</style>